<template>
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-sm-6 col-lg-3">
        <div class="card">
          <div class="card-block">
            <div class="h4 m-0">89.9%</div>
            <div>Lorem ipsum...</div>
            <div class="progress progress-xs my-1">
              <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-sm-6 col-lg-3">
        <div class="card">
          <div class="card-block">
            <div class="h4 m-0">12.124</div>
            <div>Lorem ipsum...</div>
            <div class="progress progress-xs my-1">
              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-sm-6 col-lg-3">
        <div class="card">
          <div class="card-block">
            <div class="h4 m-0">$98.111,00</div>
            <div>Lorem ipsum...</div>
            <div class="progress progress-xs my-1">
              <div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-sm-6 col-lg-3">
        <div class="card">
          <div class="card-block">
            <div class="h4 m-0">2 TB</div>
            <div>Lorem ipsum...</div>
            <div class="progress progress-xs my-1">
              <div class="progress-bar bg-danger" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
          </div>
        </div>
      </div><!--/.col-->
    </div><!--/.row-->
    <div class="row">
      <div class="col-sm-6 col-lg-3">
        <div class="card card-inverse card-primary">
          <div class="card-block">
            <div class="h4 m-0">89.9%</div>
            <div>Lorem ipsum...</div>
            <div class="progress progress-white progress-xs my-1">
              <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-sm-6 col-lg-3">
        <div class="card card-inverse card-warning">
          <div class="card-block">
            <div class="h4 m-0">12.124</div>
            <div>Lorem ipsum...</div>
            <div class="progress progress-white progress-xs my-1">
              <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-sm-6 col-lg-3">
        <div class="card card-inverse card-danger">
          <div class="card-block">
            <div class="h4 m-0">$98.111,00</div>
            <div>Lorem ipsum...</div>
            <div class="progress progress-white progress-xs my-1">
              <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-sm-6 col-lg-3">
        <div class="card card-inverse card-info">
          <div class="card-block">
            <div class="h4 m-0">2 TB</div>
            <div>Lorem ipsum...</div>
            <div class="progress progress-white progress-xs my-1">
              <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
          </div>
        </div>
      </div><!--/.col-->
    </div><!--/.row-->
    <div class="row">
      <div class="col-6 col-lg-3">
        <div class="card">
          <div class="card-block p-1 clearfix">
            <i class="fa fa-cogs bg-primary p-1 font-2xl mr-1 float-left"></i>
            <div class="h5 text-primary mb-0 mt-h">$1.999,50</div>
            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-6 col-lg-3">
        <div class="card">
          <div class="card-block p-1 clearfix">
            <i class="fa fa-laptop bg-info p-1 font-2xl mr-1 float-left"></i>
            <div class="h5 text-info mb-0 mt-h">$1.999,50</div>
            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-6 col-lg-3">
        <div class="card">
          <div class="card-block p-1 clearfix">
            <i class="fa fa-moon-o bg-warning p-1 font-2xl mr-1 float-left"></i>
            <div class="h5 text-warning mb-0 mt-h">$1.999,50</div>
            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-6 col-lg-3">
        <div class="card">
          <div class="card-block p-1 clearfix">
            <i class="fa fa-bell bg-danger p-1 font-2xl mr-1 float-left"></i>
            <div class="h5 text-danger mb-0 mt-h">$1.999,50</div>
            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-6 col-lg-3">
        <div class="card">
          <div class="card-block p-1 clearfix">
            <i class="fa fa-cogs bg-primary p-1 font-2xl mr-1 float-left"></i>
            <div class="h5 text-primary mb-0 mt-h">$1.999,50</div>
            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
          </div>
          <div class="card-footer px-1 py-h">
            <a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-6 col-lg-3">
        <div class="card">
          <div class="card-block p-1 clearfix">
            <i class="fa fa-laptop bg-info p-1 font-2xl mr-1 float-left"></i>
            <div class="h5 text-info mb-0 mt-h">$1.999,50</div>
            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
          </div>
          <div class="card-footer px-1 py-h">
            <a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-6 col-lg-3">
        <div class="card">
          <div class="card-block p-1 clearfix">
            <i class="fa fa-moon-o bg-warning p-1 font-2xl mr-1 float-left"></i>
            <div class="h5 text-warning mb-0 mt-h">$1.999,50</div>
            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
          </div>
          <div class="card-footer px-1 py-h">
            <a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-6 col-lg-3">
        <div class="card">
          <div class="card-block p-1 clearfix">
            <i class="fa fa-bell bg-danger p-1 font-2xl mr-1 float-left"></i>
            <div class="h5 text-danger mb-0 mt-h">$1.999,50</div>
            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
          </div>
          <div class="card-footer px-1 py-h">
            <a class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></a>
          </div>
        </div>
      </div><!--/.col-->
    </div><!--/.row-->
    <div class="row">
      <div class="col-6 col-lg-3">
        <div class="card">
          <div class="card-block p-0 clearfix">
            <i class="fa fa-cogs bg-primary p-2 font-2xl mr-1 float-left"></i>
            <div class="h5 text-primary mb-0 pt-1">$1.999,50</div>
            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-6 col-lg-3">
        <div class="card">
          <div class="card-block p-0 clearfix">
            <i class="fa fa-laptop bg-info p-2 font-2xl mr-1 float-left"></i>
            <div class="h5 text-info mb-0 pt-1">$1.999,50</div>
            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-6 col-lg-3">
        <div class="card">
          <div class="card-block p-0 clearfix">
            <i class="fa fa-moon-o bg-warning p-2 font-2xl mr-1 float-left"></i>
            <div class="h5 text-warning mb-0 pt-1">$1.999,50</div>
            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-6 col-lg-3">
        <div class="card">
          <div class="card-block p-0 clearfix">
            <i class="fa fa-bell bg-danger p-2 font-2xl mr-1 float-left"></i>
            <div class="h5 text-danger mb-0 pt-1">$1.999,50</div>
            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-6 col-lg-3">
        <div class="card">
          <div class="card-block p-0 clearfix">
            <i class="fa fa-cogs bg-primary p-2 px-3 font-2xl mr-1 float-left"></i>
            <div class="h5 text-primary mb-0 pt-1">$1.999,50</div>
            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-6 col-lg-3">
        <div class="card">
          <div class="card-block p-0 clearfix">
            <i class="fa fa-laptop bg-info p-2 px-3 font-2xl mr-1 float-left"></i>
            <div class="h5 text-info mb-0 pt-1">$1.999,50</div>
            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-6 col-lg-3">
        <div class="card">
          <div class="card-block p-0 clearfix">
            <i class="fa fa-moon-o bg-warning p-2 px-3 font-2xl mr-1 float-left"></i>
            <div class="h5 text-warning mb-0 pt-1">$1.999,50</div>
            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-6 col-lg-3">
        <div class="card">
          <div class="card-block p-0 clearfix">
            <i class="fa fa-bell bg-danger p-2 px-3 font-2xl mr-1 float-left"></i>
            <div class="h5 text-danger mb-0 pt-1">$1.999,50</div>
            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
          </div>
        </div>
      </div><!--/.col-->
    </div><!--/.row-->
    <div class="row">
      <div class="col-md-3 col-sm-6">
        <div class="social-box facebook">
          <i class="fa fa-facebook"></i>
          <ul>
            <li>
              <strong>89k</strong>
              <span>friends</span>
            </li>
            <li>
              <strong>459</strong>
              <span>feeds</span>
            </li>
          </ul>
        </div><!--/social-box-->
      </div><!--/.col-->
      <div class="col-md-3 col-sm-6">
        <div class="social-box twitter">
          <i class="fa fa-twitter"></i>
          <ul>
            <li>
              <strong>973k</strong>
              <span>followers</span>
            </li>
            <li>
              <strong>1.792</strong>
              <span>tweets</span>
            </li>
          </ul>
        </div><!--/social-box-->
      </div><!--/.col-->
      <div class="col-md-3 col-sm-6">
        <div class="social-box linkedin">
          <i class="fa fa-linkedin"></i>
          <ul>
            <li>
              <strong>500+</strong>
              <span>contacts</span>
            </li>
            <li>
              <strong>292</strong>
              <span>feeds</span>
            </li>
          </ul>
        </div><!--/social-box-->
      </div><!--/.col-->
      <div class="col-md-3 col-sm-6">
        <div class="social-box google-plus">
          <i class="fa fa-google-plus"></i>
          <ul>
            <li>
              <strong>894</strong>
              <span>followers</span>
            </li>
            <li>
              <strong>92</strong>
              <span>circles</span>
            </li>
          </ul>
        </div><!--/social-box-->
      </div><!--/.col-->
    </div><!--/.row-->
    <div class="card-group">
      <div class="card">
        <div class="card-block">
          <div class="h1 text-muted text-right mb-2">
            <i class="icon-people"></i>
          </div>
          <div class="h4 mb-0">87.500</div>
          <small class="text-muted text-uppercase font-weight-bold">Visitors</small>
          <div class="progress progress-xs mt-1 mb-0">
            <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-block">
          <div class="h1 text-muted text-right mb-2">
            <i class="icon-user-follow"></i>
          </div>
          <div class="h4 mb-0">385</div>
          <small class="text-muted text-uppercase font-weight-bold">New Clients</small>
          <div class="progress progress-xs mt-1 mb-0">
            <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-block">
          <div class="h1 text-muted text-right mb-2">
            <i class="icon-basket-loaded"></i>
          </div>
          <div class="h4 mb-0">1238</div>
          <small class="text-muted text-uppercase font-weight-bold">Products sold</small>
          <div class="progress progress-xs mt-1 mb-0">
            <div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-block">
          <div class="h1 text-muted text-right mb-2">
            <i class="icon-pie-chart"></i>
          </div>
          <div class="h4 mb-0">28%</div>
          <small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
          <div class="progress progress-xs mt-1 mb-0">
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-block">
          <div class="h1 text-muted text-right mb-2">
            <i class="icon-speedometer"></i>
          </div>
          <div class="h4 mb-0">5:34:11</div>
          <small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
          <div class="progress progress-xs mt-1 mb-0">
            <div class="progress-bar bg-danger" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6 col-md-2">
        <div class="card">
          <div class="card-block">
            <div class="h1 text-muted text-right mb-2">
              <i class="icon-people"></i>
            </div>
            <div class="h4 mb-0">87.500</div>
            <small class="text-muted text-uppercase font-weight-bold">Visitors</small>
            <div class="progress progress-xs mt-1 mb-0">
              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-sm-6 col-md-2">
        <div class="card">
          <div class="card-block">
            <div class="h1 text-muted text-right mb-2">
              <i class="icon-user-follow"></i>
            </div>
            <div class="h4 mb-0">385</div>
            <small class="text-muted text-uppercase font-weight-bold">New Clients</small>
            <div class="progress progress-xs mt-1 mb-0">
              <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-sm-6 col-md-2">
        <div class="card">
          <div class="card-block">
            <div class="h1 text-muted text-right mb-2">
              <i class="icon-basket-loaded"></i>
            </div>
            <div class="h4 mb-0">1238</div>
            <small class="text-muted text-uppercase font-weight-bold">Products sold</small>
            <div class="progress progress-xs mt-1 mb-0">
              <div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-sm-6 col-md-2">
        <div class="card">
          <div class="card-block">
            <div class="h1 text-muted text-right mb-2">
              <i class="icon-pie-chart"></i>
            </div>
            <div class="h4 mb-0">28%</div>
            <small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
            <div class="progress progress-xs mt-1 mb-0">
              <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-sm-6 col-md-2">
        <div class="card">
          <div class="card-block">
            <div class="h1 text-muted text-right mb-2">
              <i class="icon-speedometer"></i>
            </div>
            <div class="h4 mb-0">5:34:11</div>
            <small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
            <div class="progress progress-xs mt-1 mb-0">
              <div class="progress-bar bg-danger" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-sm-6 col-md-2">
        <div class="card">
          <div class="card-block">
            <div class="h1 text-muted text-right mb-2">
              <i class="icon-speech"></i>
            </div>
            <div class="h4 mb-0">972</div>
            <small class="text-muted text-uppercase font-weight-bold">Comments</small>
            <div class="progress progress-xs mt-1 mb-0">
              <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </div>
      </div><!--/.col-->
    </div><!--/.row-->
    <div class="row">
      <div class="col-sm-6 col-md-2">
        <div class="card card-inverse card-info">
          <div class="card-block">
            <div class="h1 text-muted text-right mb-2">
              <i class="icon-people"></i>
            </div>
            <div class="h4 mb-0">87.500</div>
            <small class="text-muted text-uppercase font-weight-bold">Visitors</small>
            <div class="progress progress-white progress-xs mt-1">
              <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-sm-6 col-md-2">
        <div class="card card-inverse card-success">
          <div class="card-block">
            <div class="h1 text-muted text-right mb-2">
              <i class="icon-user-follow"></i>
            </div>
            <div class="h4 mb-0">385</div>
            <small class="text-muted text-uppercase font-weight-bold">New Clients</small>
            <div class="progress progress-white progress-xs mt-1">
              <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-sm-6 col-md-2">
        <div class="card card-inverse card-warning">
          <div class="card-block">
            <div class="h1 text-muted text-right mb-2">
              <i class="icon-basket-loaded"></i>
            </div>
            <div class="h4 mb-0">1238</div>
            <small class="text-muted text-uppercase font-weight-bold">Products sold</small>
            <div class="progress progress-white progress-xs mt-1">
              <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-sm-6 col-md-2">
        <div class="card card-inverse card-primary">
          <div class="card-block">
            <div class="h1 text-muted text-right mb-2">
              <i class="icon-pie-chart"></i>
            </div>
            <div class="h4 mb-0">28%</div>
            <small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
            <div class="progress progress-white progress-xs mt-1">
              <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-sm-6 col-md-2">
        <div class="card card-inverse card-danger">
          <div class="card-block">
            <div class="h1 text-muted text-right mb-2">
              <i class="icon-speedometer"></i>
            </div>
            <div class="h4 mb-0">5:34:11</div>
            <small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
            <div class="progress progress-white progress-xs mt-1">
              <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </div>
      </div><!--/.col-->
      <div class="col-sm-6 col-md-2">
        <div class="card card-inverse card-info">
          <div class="card-block">
            <div class="h1 text-muted text-right mb-2">
              <i class="icon-speech"></i>
            </div>
            <div class="h4 mb-0">972</div>
            <small class="text-muted text-uppercase font-weight-bold">Comments</small>
            <div class="progress progress-white progress-xs mt-1">
              <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </div>
      </div><!--/.col-->
    </div><!--/.row-->
  </div>
</template>

<script>
export default {
  name: 'widgets',
  data () {
    return {
      msg: 'Widgets'
    }
  }
}
</script>
